

<template>
    <div>
      <h2>条形码生成器</h2>
      <input v-model="text" placeholder="输入文本生成条形码" aria-label="输入文本" />
      <button @click="generateBarcode" aria-label="生成条形码">生成条形码</button>
      <canvas ref="barcodeCanvasRef"></canvas>
    </div>
  </template>
   
<script setup lang="ts">
import bwipjs from 'bwip-js'
import { ref } from 'vue'
 
const text = ref('')
const barcodeCanvasRef = ref("")

 
function generateBarcode() {
  console.log(text.value);
  console.log(barcodeCanvasRef.value);
  
  bwipjs.toCanvas(barcodeCanvasRef.value, {
    bcid: 'code128', // 条形码类型
    text: text.value,
    scale: 2, // 缩放比例
    height: 5, // 条形码高度
    includetext: true, // 是否包括文本
    textxalign: 'center' // 文本对齐方式
    
  })
}
</script>
 

 